<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.6.0/jszip.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

<script>
    function downloadUrl(url) {
        const xhr = new XMLHttpRequest();
        xhr.responseType = 'blob';
        xhr.onload = () => {
            const a = document.createElement('a');
            a.href = window.URL.createObjectURL(xhr.response);
            a.download = url.substring(url.lastIndexOf('/') + 1);
            a.style.display = 'none';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        };
        xhr.open('GET', url);
        xhr.send();
    }

    function downloadUrls(urls) {
        const zip = new JSZip();
        const folder = zip.folder('files');
        const promises = urls.map(url => {
            return fetch(url)
                .then(response => response.blob())
                .then(blob => {
                    const filename = url.substring(url.lastIndexOf('/') + 1);
                    folder.file(filename, blob);
                });
        });
        Promise.all(promises)
            .then(() => {
                zip.generateAsync({type: 'blob'})
                    .then(blob => {
                        const a = document.createElement('a');
                        a.href = window.URL.createObjectURL(blob);
                        a.download = 'files ' + new Date().getTime() + '.zip';
                        a.style.display = 'none';
                        document.body.appendChild(a);
                        a.click();
                        document.body.removeChild(a);
                    });
            });
    }

    const data =
        [
            {
                "url": "http://123.60.161.161:80/gps-web/photos?refPath=2023-05-29/239/131527_00_02_6502_0_11106225621-20230529131527-11273.jpg",
                "type": "0"
            },
            {
                "url": "http://123.60.161.161:80/gps-web/photos?refPath=2023-05-29/239/131527_00_02_6502_1_11106225621-20230529131527-11273.jpg",
                "type": "0"
            },
            {
                "url": "http://123.60.161.161:80/gps-web/photos?refPath=2023-05-29/239/131527_00_02_6502_2_11106225621-20230529131527-11273.jpg",
                "type": "0"
            },
            {
                "url": "http://123.60.161.161:80/gps-web/photos?refPath=2023-05-29/239/131705_00_02_6502_0_11106225621-20230529131705-09616.jpg",
                "type": "0"
            },
            {
                "url": "http://123.60.161.161:80/gps-web/photos?refPath=2023-05-29/239/131705_00_02_6502_1_11106225621-20230529131705-09616.jpg",
                "type": "0"
            },
            {
                "url": "http://123.60.161.161:80/gps-web/photos?refPath=2023-05-29/239/131705_00_02_6502_2_11106225621-20230529131705-09616.jpg",
                "type": "0"
            },
            {
                "url": "http://123.60.161.161:80/gps-web/photos?refPath=2023-05-29/239/131527_02_02_6502_0_11106225621-20230529131527-11273.new.mp4",
                "type": "2"
            },
            {
                "url": "http://123.60.161.161:80/gps-web/photos?refPath=2023-05-29/239/131705_02_02_6502_0_11106225621-20230529131705-09616.new.mp4",
                "type": "2"
            }
        ]

    // 单个下载
    // data.forEach(item => {
    //     downloadUrl((item.url))
    // })

    // 打包成zip
    let urls = data.map(item => item.url)
    console.log(urls)
    downloadUrls(urls)

</script>
</body>
</html>
